
import { useState, useEffect } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { NavBar } from "antd-mobile";
import { getCurrentUserInfo } from "@/utils/authority";
import { activityDetails,activityRead } from "@/pages/User/service";


export default function MyActivityDetails() {
	const navigate = useNavigate();
	const userId = getCurrentUserInfo()?.data?.id;
	const location = useLocation();
	const itemData = location?.state;

	const [detailsData, setDetailsData] = useState<any>({});

	const getDetailsData = async () => {
		const params = {
			userId,
			activityId: itemData.id,
		};
		try {
			const { data } = await activityDetails(params);
			setDetailsData(data?.[0]);
		} catch {}
	};
	const dataRead = async () => {
		const params = {
			userId,
			activityId: itemData.id,
		};
		try {
			 await activityRead(params);
		} catch {}
	};
	useEffect(() => {
		getDetailsData();
		dataRead()
	}, []);
	return (
		<div className="ads_contarnier">
			<div className="header-bg"></div>
			<div className="header-containt">
				<NavBar onBack={() => navigate(-1)}>
					<div className="commontitle">活动详情</div>
				</NavBar>
			</div>

			<div className="ad_content">
				<div className="ad_c_content">
					<img
						src="/images/mycommunity/bioqian.png"
						alt=""
					/>
					<div className="ad_brief">
						<div className="ad_brief_content">
							<div className="ad_bc_title">{detailsData?.title}</div>
							<div className="ad_bc_img">
								<img
									src="/images/banner@2x.png"
									alt=""
								/>
							</div>
							<div className="ad_bc_brief">
								<div className="ad_bcb_title">活动时间</div>
								<div className="ad_bcb_content">
									{detailsData?.startTime} 至 {detailsData?.endTime}
								</div>
								<div className="ad_bcb_title">已报名人数</div>
								<div className="ad_bcb_content">{detailsData?.signUpNum || 0}人</div>
							</div>
						</div>
					</div>
					<div className="ad_detail">
						<div className="ad_detail_content">{detailsData?.content}</div>
					</div>
					<div className="ad_application">已报名</div>
				</div>
			</div>
		</div>
	);
}
